<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>中汇财经</title>
    <link rel="stylesheet" type="text/css" href="css/styleUI.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="droploaddist/dropload.css">
</head>
<body>
<div id="page" class="uf uf-ver">
    <div id="header" class="uf uf-ac uf-pja">
        <div onclick="multiContainer(this);" class="nav">早盘急先锋</div>
        <div onclick="multiContainer(this);" class="nav">金色两点半</div>
    </div>

    <!--早盘急先锋-->
    <div id="container0" class="multiContainer uf-f u-scroll">
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>

    </div>
    <!--金色两点半-->
    <div id="container1" class="multiContainer uf-f u-scroll">
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>
        <a href="articleTxt.html" data-id="" class="li plot">
            <img src="image/static/demoPic1.jpg">
            <div class="info">
                <div class="title">好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂好好学习天天瞎弄刚昂</div>
                <div class="time">2017-07-17</div>
            </div>
        </a>

    </div>
    <!--空置 占位-->
    <div class="multiContainer show uf-f u-scroll"></div>
    <div id="footer" class="uf">
        <a href="index.html" class="uf-f uf uf-ae uf-pc">判大势</a>
        <a href="plot.html" class="uf-f uf uf-ae uf-pc active">牛布局</a>
        <a href="liveVideo.html" class="uf-f uf uf-ae uf-pc">观直播</a>
        <a href="about.html" class="uf-f uf uf-ae uf-pc">寻合作</a>
    </div>

</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="droploaddist/dropload.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if (sessionStorage.getItem("plot.multiContainer.index")) {
            var i = sessionStorage.getItem("plot.multiContainer.index");
            var $ele = $($("#header .nav")[i]);
            $ele.click();
        } else {
            $($("#header .nav")[0]).click();
        }
        droploadInit(0);
        droploadInit(1);
    });

    function multiContainer(ele) {
        var $ele = $(ele), i = $ele.index();
        sessionStorage.setItem("plot.multiContainer.index", i);
        $ele.addClass("active").siblings().removeClass("active");
        $("#container" + i).addClass("show").siblings(".multiContainer").removeClass("show");
    }


    function droploadInit(i) {
        //上下拉刷新的区域
        var $scrollArea = $('#container' + i);
        var $dropDiv = $scrollArea;
        $dropDiv.dropload({
            scrollArea: $scrollArea,//滚动条滑动的区域
            threshold: 50,
            loadUpFn: function (me) {
                //刷新整个页面
                window.location.reload();
                setTimeout(function () {
                    me.resetload();
                }, 500);
            },
            loadDownFn: function (me) {
                var $last = $dropDiv.find(".li").last();//最后一条元素
                var lastId = $last.data("id");//最后一条元素的data-id
                if (!lastId) {
                    //如果不存在last_id
                    me.lock();// 锁定
                    me.noData();// 无数据
                    me.resetload();// 重置页面刷新状态
                    return;
                }
                var url = "";
                switch (i) {
                    case 0:
                        url = "";
                        break;
                    case 1:
                        url = "";
                        break;
                }
                $.ajax({
                    type: "post",
                    url: url,
                    data: {
                        id: lastId
                    },
                    success: function (ret) {
                        var listHtml = ret;//返回的html列表
                        if (listHtml && listHtml.length) {
                            //一定时间显示加载效果
                            setTimeout(function () {
                                // 在页面最后一条之后插入新的html数据
                                $last.after(listHtml);
                                // 每次数据插入，必须重置
                                me.resetload();
                            }, 300);
                        } else {
                            me.lock();// 锁定
                            me.noData();// 无数据
                            me.resetload();// 重置页面刷新状态
                        }
                    },
                    error: function (xhr, type) {
                        me.lock();// 锁定
                        me.Err();// 出错了
                        me.resetload();// 即使加载出错，也得重置
                    }
                });
            }
        });
    }

</script>

</body>
</html>